<!doctype html>
<html>
	<head>
		<title> Test PUI style with angular -- listbox </title>
		<link rel="stylesheet" href="../jquery-ui/jquery-ui-1.9.2.custom.min.css" />
		<link rel="stylesheet" href="../production/primeui-1.0-min.css" />
		<link rel="stylesheet" href="../themes/aristo/theme.css" />
		<style>
		.pui-tree-grid-1 {
			padding-left: 5px !important;
		}

		.pui-tree-grid-2 {
			padding-left: 20px !important;
		}

		.pui-tree-grid-3 {
			padding-left: 35px !important;
		}

		.pui-tree-grid-4 {
			padding-left: 50px !important;
		}
		</style>
	</head>

	<body ng-controller="MainCtrl">

	<div ng-disabled="ctrl.isGray" 
		pui-tree="" 
		data-list="list" data-on-choose="chooseNode(item)"></div>
	<br />
	{{choosedNode|json}}
	<br />

	<div ng-disabled="ctrl.isGray" 
		pui-tree="" 
		data-list="list" data-headers="headers" data-on-choose="chooseNode(item)"></div>

	<script type="text/javascript" src="angular.min.js"></script>
	<script type="text/javascript" src="underscore.min.js"></script>
	<script type="text/javascript" src="zepto-1.1.3.js"></script>
	<script type="text/javascript" src="all.js"></script>
	<script language="javascript">
	var md = angular.module('md', ['pui']);

	md.controller('MainCtrl', function($scope, $timeout){
		$scope.ctrl = {isGray: true};
		$timeout(function(){
			$scope.ctrl.isGray = false;
		}, 1000 * 3);

		$scope.list = [];
		$scope.list.push({id: 1, label: 'node1', pid: 0});
		$scope.list.push({id: 2, label: 'node2', pid: 0});
		$scope.list.push({id: 3, label: 'node11', pid: 1});
		$scope.list.push({id: 4, label: 'node12', pid: 1});
		$scope.list.push({id: 5, label: 'node21', pid: 2});
		$scope.list.push({id: 6, label: 'node211', pid: 5});
		$scope.list.push({id: 7, label: 'node2111', pid: 6});

		$scope.headers = [{label: 'AA', width: '60%'}, 
			{label: 'PID', key: 'pid', width: '20%'}, 
			{label: 'ID', key: 'id', width: '20%'}];

		$scope.chooseNode = function(item){
			$scope.choosedNode = item;
		};
	});

	angular.bootstrap(document, ['md']);
	</script>
	</body>
</html>